import React from "react"
import { Link } from "gatsby"

export default function Header() {
  return (
    <div>
      <header className="flex justify-between items-center border-b p-4 sm:p4 md:p8 lg:p8 xl:p8">
        <nav>
          <Link to="/" className="mr-8">
            Home
          </Link>
          <Link to="/about" className="mr-8">
            About
          </Link>
        </nav>
        <svg
          className="h-5 cursor-pointer"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </header>
    </div>
  )
}
